<script setup>

import {useSysOrganizationMutations} from "@/composables/sys/organization.js";
import {h} from "vue";
import DictSelect from "@/components/dict-select/index.vue";
import {dictCode} from "@/common/constant.js";
import ConfirmButton from "@/components/confirm-button/index.vue";
import {NButton, NSpace, useMessage} from "naive-ui";
import {renderIcon} from "@/utils/index.js";
import {AddOutline, Trash} from "@vicons/ionicons5";
import {usePermission} from "@/composables/use-permission.js";

const {hasPermission} = usePermission()

const emits = defineEmits([
  'on-add', 'on-edit'
])
defineProps({
  data: {
    type: Array,
    required: true
  },
  isLoading: {
    type: Boolean,
    default: false
  }
})
const checkedRowKeys = ref([])
const message = useMessage()
const sysOrganizationMutations = useSysOrganizationMutations()

const columns = [
  {
    type: 'selection',
    width: 60
  },
  {
    title: '机构名称',
    key: 'name',
    align: 'center',
  },
  {
    title: '机构代码',
    key: 'code',
    align: 'center',
  },
  {
    title: '排序号',
    key: 'sort',
    align: 'center',
    width: 80
  },
  {
    title: '创建时间',
    key: 'createdAt',
    align: 'center',
    width: 180,
  },
  {
    title: '创建人',
    key: 'createdBy',
    align: 'center',
    width: 180,
    render(row) {
      return h(DictSelect, {
        code: dictCode.SYS_USER,
        value: row.createdBy,
        disabled: true
      })
    }
  },
  {
    title: '更新时间',
    key: 'updatedAt',
    align: 'center',
    width: 180
  },
  {
    title: '更新人',
    key: 'updatedBy',
    align: 'center',
    width: 180,
    render(row) {
      return h(DictSelect, {
        code: dictCode.SYS_USER,
        value: row.createdBy,
        disabled: true
      })
    }
  },
  {
    title: '操作',
    key: 'actions',
    align: 'center',
    width: 200,
    render(row) {
      return [
        hasPermission('delete') ?
            h(ConfirmButton,
                {
                  text: '删除',
                  type: 'error',
                  size: 'tiny',
                  quaternary: true,
                  onPositiveClick: async () => {
                    try {
                      await sysOrganizationMutations.deleteById.mutateAsync(row.id)
                      message.success('删除成功')
                    } catch (e) {
                      console.error(e)
                    }
                  }
                }
            ) : null,
        hasPermission('update') ?
            h(NButton, {
              type: 'primary',
              size: 'tiny',
              quaternary: true,
              onClick: () => emits('on-edit', row.id)
            }, {default: () => '编辑'}) : null
      ]
    }
  }
]

// 批量删除
const handleBatchDelete = async () => {
  try {
    await sysOrganizationMutations.deleteBatch.mutateAsync(checkedRowKeys.value)
    message.success('批量删除成功')
    checkedRowKeys.value = []
  } catch (e) {
    console.error(e)
  }
}

</script>

<template>
  <n-space vertical>
    <n-space reverse>
      <n-button
          v-if="hasPermission('create')"
          type="primary"
          size="small"
          :render-icon="renderIcon(AddOutline)"
          @click="$emit('on-add')">
        <span>新增</span>
      </n-button>
      <confirm-button
          v-if="hasPermission('update')"
          text="批量删除"
          type="error" size="small"
          :disabled="checkedRowKeys.length === 0"
          :render-icon="renderIcon(Trash)"
          @positive-click="handleBatchDelete"
      />
    </n-space>
    <n-data-table
        ref="table"
        remote
        v-model:checked-row-keys="checkedRowKeys"
        :loading="isLoading"
        :row-key="(row) => row.id"
        :columns="columns"
        :data="data"
    />
  </n-space>
</template>

<style scoped>

</style>